<template>
    <div class="header">
      <div class="content-wrapper">
        <div class="avatar">
          <img :src="seller.avatar" width="64" height="64" />
        </div>
        <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          {{seller.description}}/{{seller.deliveryTime}}分钟送达
        </div>
        <div class="support" v-if="seller.supports">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
      </div>
      
      <div class="bulletin-wraper"></div>
    </div>
</template>
<script>
export default {
    props:['seller'],
    created(){//生命周期
       this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    }
};
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl';
  .header
    color:#fff
    background-color :#000
    .content-wrapper
      padding:24px 12px 18px 24px
      font-size 0
      .avatar
        display:inline-block
        vertical-align top
        img 
         border-radius 2px
      .content
        display:inline-block
        margin-left:16px
        font-size 14px
        .title
          margin 2px 0 8px 0
          .brand
            display inline-block
            width 30px
            height 18px
            bg-image('brand')
            background-repeat no-repeat
            background-size 30px 18px
            vertical-align top
          .name
            font-size 16px
            font-weight bold
            line-height 18px
            margin-left 6px
        .description
          font-size 12px
          line-height 12px
          margin-bottom 10px
          font-weight 200px
        .support
          .icon
            display inline-block
            width 12px
            height 12px
            margin-right 4px
            background-size 12px 12px
            background-repeat no-repeat
            vertical-align: bottom
            &.decrease
              bg-image('decrease_1')
            &.discount
              bg-image('discount_1')
            &.guarantee
              bg-image('guarantee_1')
            &.invoice
              bg-image('invoice_1')
            &.special
              bg-image('special_1')
          .text
            line-height 12px
            font-size 12px


</style>



